<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <title>登录</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
</head>
<body>
<label for="nickname_id">昵称</label>
<input type="text" class="form-control" id="nickname_id" placeholder="昵称" />
<button onclick="conn()" class="btn btn-default">连接</button>
<button onclick="closeConn()" class="btn btn-default">断开连接</button>
<label for="content_id">内容</label>
<input type="text" class="form-control" id="content_id" placeholder="消息内容" />
<button class="btn btn-default" onclick="send()">发送</button>

<div id="message_id">

</div>

<script>
    var websocket = null;

    function conn() {
        if("WebSocket" in window) {
            var nickname = document.getElementById("nickname_id").value;
            if(!websocket) {
                websocket = new WebSocket("ws://localhost:8080/myspringboot/websocket/"+nickname);
            }
        } else {
            alert("not support websocket");
        }

        websocket.onopen= function (event) {
            printMsg("连接成功");
        }

        websocket.onclose = function (event) {
            printMsg("断开连接");
        }

        websocket.onerror = function (event) {
            printMsg("连接异常");
        }

        websocket.onmessage = function (event) {
            printMsg(event.data);
        }

    }

    function printMsg(message) {
        var messageId = document.getElementById("message_id");
        messageId.innerHTML += message+"<br />";
    }

    function send() {
        var msg = document.getElementById("content_id").value;
        websocket.send(msg);
    }

</script>
<!--
<div class="container">
    <div class="row">
        <div class="col-md-1" style="border-color: aqua">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
    </div>
    <div class="row">
        <div class="col-md-6" style="background-color: blue">.col-md-6</div>
        <div class="col-md-6" style="background-color: black">.col-md-6</div>
    </div>
    <del>删除的内容</del>
    <s>无用的内容</s>
    <u>我是下划线的内容</u>
    <small>我是small</small>
    <strong>我是strong</strong>
    <em>有点歪</em>
    <p class="text-left">text-left</p>
    <p class="text-right">text-right</p>
    <p class="text-center">text-center</p>
    <p class="text-left">text-left</p>
    <p class="text-justify">text-justify</p>
    <p class="text-nowrap">text-nowrap</p>
    <p class="text-lowercase">text-lowercase</p>
    <p class="text-uppercase">text-uppercase</p>
    <p>
        <form>
            <div class="form-group">
                <label for="email_id">email</label>
                <input type="email" class="form-control" id="email_id" placeholder="email" />
            </div>
            <div class="form-group">
                <label>
                    <input type="checkbox" /> check me out
                </label>
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
        </form>
    </p>
</div>
-->
</body>
</html>